import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Form, Select, Input, Button, message } from 'antd'; // 新增导入 Select
import styled from 'styled-components';

const Container = styled.div`
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;
`;

// 预设快递公司列表
const EXPRESS_COMPANIES = [
  { value: 'shunfeng', label: '顺丰速运' },
  { value: 'zhongtong', label: '中通快递' },
  { value: 'yuantong', label: '圆通速递' },
  { value: 'yunda', label: '韵达快递' },
  { value: 'shentong', label: '申通快递' },
];

const AfterSaleLogistics = () => {
  const { afterSaleId } = useParams();
  const navigate = useNavigate();
  const [form] = Form.useForm();

  // ... existing code ...
  const handleSubmit = async (values) => {
    try {
      const afterSales = JSON.parse(localStorage.getItem('afterSales') || '[]');
      const targetIndex = afterSales.findIndex(item => item.id === afterSaleId);
      if (targetIndex !== -1) {
        afterSales[targetIndex].logistics = { ...values, submitTime: new Date().getTime() };
        afterSales[targetIndex].status = 'RETURNING'; // 提交物流后状态更新为"退货中"
        localStorage.setItem('afterSales', JSON.stringify(afterSales));
        message.success('物流信息提交成功');
        navigate(`/app/after-sale/${afterSaleId}`);
      }
    } catch (error) {
      message.error('提交失败，请重试');
    }
  };
  // ... existing code ...

  return (
    <Container>
      <h3 style={{ marginBottom: 24 }}>填写退货物流信息</h3>
      <Form
        form={form}
        onFinish={handleSubmit}
        layout="vertical"
        requiredMark="optional"
      >
        {/* 快递公司改为下拉选择 */}
        <Form.Item
          name="company"
          label="快递公司"
          rules={[{ required: true, message: '请选择快递公司' }]}
        >
          <Select placeholder="请选择快递公司">
            {EXPRESS_COMPANIES.map(company => (
              <Select.Option key={company.value} value={company.value}>
                {company.label}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="trackingNumber"
          label="物流单号"
          rules={[{ required: true, message: '请输入物流单号' }]}
        >
          <Input placeholder="12位数字或字母" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            提交物流信息
          </Button>
        </Form.Item>
      </Form>
    </Container>
  );
};

export default AfterSaleLogistics;